<template>
	<view class="container">
		<!-- <u-overlay :show="showChunk" @click="showChunk = false"></u-overlay> -->
       <view class="container-card" v-if="dataList.length > 0">
		   <view class="container-card-item" v-for="(item ,index) of dataList" :index="index" @click="handleCard(item)">
			   <view class="container-card-item-head">
				   <view  class="container-card-item-head-left">
					   <image src="@/static/gslogo.png" mode="aspectFill"></image>
					   <view class="container-card-item-head-left-title">
						   <view>{{ item.branch_bank_name }}</view>
						   <view>储蓄卡</view>
					   </view>
				   </view>
				   <view class="container-card-item-head-right">
					   <!-- <view class="container-card-item-head-right-default">设置默认</view> -->
					   <image src="@/static/aside.png" mode="aspectFill"></image>
					   
				<!-- 	   <view  class="container-card-item-head-right-select">
						   <view style="padding: 12rpx 24rpx;">
						   	删除
						   </view>
					   </view> -->
				   </view>
			   </view>
			   <view class="container-card-item-footer">
				   {{ item.bank_account }}
			   </view>
		   </view>
	   </view>
	   	<view class="container-none" v-else>
	   		<view class="container-none-image">
	   			<image
	   				src="https://kx.taipingkeji.com/upload/1/common/images/20240229/20240229112535170922033573181.png"
	   				mode="aspectFill"></image>
	   		</view>
	   		<view class="container-none-title">
	   			暂无银行卡号
	   		</view>
	   	</view>
		
		<view class="container-footer">
			<view class="container-footer-btn" @click="jumt">
				新增银行卡
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				dataList: [],
				bankToken: '',
				stateBank: '',
				showChunk: false,
				money: ''
			}
		},
		components: {
    
		},
		onLoad({ state }) {
		 this.bankToken = uni.getStorageSync('token')
		 this.stateBank = +state
		},
		onShow() {
		  this.getBankList()
		},
		methods: {
		 getBankList(){
			 uni.showLoading({
			 	title: '加载中...'
			 })
		   const that = this
		   request({
			   url: '/kx/withdrawal/getBankList',
			   method: 'POST',
			   data: {
				   token: this.bankToken,
			   },
			   successCb(res){
				 uni.hideLoading()
				that.dataList = res.data || []
			   },
			   failCb(){
				 uni.hideLoading()
			   }
		   })  
		 },
		 handleCard(item){
			 if(this.stateBank === 2) return
			uni.setStorage({
				data:item,
				key: 'userBank',
				success() {
				 uni.redirectTo({
				 	url: '/pages/Withdrawal/index'
				 })	
				}
			})
		
		 },
         jumt(){
		   uni.navigateTo({
		  	url: '/pages/bankForm/index'
		   })
		 }
		}
	}
</script>

<style scoped lang="scss">
	.container {
		&-none {
			width: 100%;
			height: 80vh;
			@include layout(center, center);
			flex-direction: column;

			&-image {}

			&-title {}
		}
		&-card {
			@include layout(center, center);
			flex-direction: column;
			margin-top: 24rpx;
			padding-bottom: 138rpx;
		  &-item {
			width: 680rpx;
			height: 242rpx;
			background: url("https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240613/20240613030326171826220603667.png") no-repeat;
			background-size: 100%;
			border-radius: 15rpx;
			margin: 12rpx 0;
			&-head {
				width: 100%;
				@include layout(space-between, center);
				margin-top: 38rpx;
				&-left{
				 @include layout(start, start);
				 image {
					 margin: 0 24rpx;
					 width: 84rpx;
					 height: 84rpx;
					object-fit: cover;
				 }
				 &-title {
					 view {
						 font-size: 36rpx;
						 color: $uni-bg-color;
						 &:nth-child(2){
							 font-size: 24rpx;
							 line-height: 1.5;
						 }
					 }
				 }
				}
				&-right {
					position: relative;
				  @include layout(start, start);
				  image {
					  width: 12rpx;
					  height: 48rpx;
					  margin-right: 32rpx;
					  object-fit: cover;
				  }
				  &-default {
					  width: 168rpx;
					  height: 44rpx;
					  line-height: 44rpx;
					  color: #F1794A;
					  text-align: center;
					  background: $uni-bg-color;
					  border-radius: 25rpx;
					  font-size: 28rpx;
					  margin-right: 24rpx;
				  }
				  &-select {
				    position: absolute;
					top: 0;
					right: 0;
					font-size: 24rpx;
					background: $uni-bg-color;
					border-radius: 25rpx;
				  }
				}
				
			}
			&-footer {
				margin-top: 44rpx;
				font-size: 48rpx;
				text-align: center;
				color: $uni-bg-color;
			}
		  }
		}
		&-footer {
            position: fixed;
			bottom: 0;
			width: 100%;
			height: 108rpx;
			background-color: $uni-bg-color;
			&-btn {
				position: fixed;
				left: 50%;
				bottom: calc(44rpx + var(--window-bottom));
				transform: translateX(-50%);
				width: 680rpx;
				height: 88rpx;
				background: linear-gradient( 90deg, #FF8732 0%, #FFB65E 100%);
				text-align: center;
				line-height: 88rpx;
				color: $uni-bg-color;
				border-radius: 45rpx;
			}
		}
	}
	
	.showOverlay{
		display: none;
	}
</style>